<template>

  <div class="AddOrUpdate_main add_container main_container">

    <div class="main_main">
      <el-card class="card1">
        <div class="formItem_header">
          <span class="textTitle">版本信息</span>         <el-button class="textTitle_btn" @click.stop="open('账号升级')">账号升级</el-button>
        </div>
        <div class="accountInfo_div">
          <div class="accountInfo_item">
            <div class="accountInfo_item_name">系统版本:</div>
            <div class="versionTag">
              <el-tag v-if="formData.typeId==1" type="warning" effect="dark">试用版</el-tag>
              <el-tag v-else type="success" effect="dark">正式版</el-tag>
            </div>
          </div>

          <div class="accountInfo_item">
            <div class="accountInfo_item_name">使用有效期至：</div>
            <div class="accountInfo_item_value">
              <div class="value_show">
                <div class="value_show_name">{{ expirationtime }}</div>
              </div>
            </div>
          </div>
          <div class="accountInfo_item">
            <div class="accountInfo_item_name">剩余使用天数：</div>
            <div class="accountInfo_item_value">
              <div v-if="formData.leftDays !== '永久'" class="value_show">
                <div v-if="formData.leftDays<=5" class="value_show_name1">{{ formData.leftDays }}天</div>
                <div v-else class="value_show_name">{{ formData.leftDays }}天</div>
              </div>
              <!--              剩余天数显示永久-->
              <div v-else class="value_show">
                <div class="value_show_name">{{ formData.leftDays }}</div>
              </div>
            </div>
          </div>
          <div v-if="codeStatus" class="accountInfo_item">
            <div class="accountInfo_item_name">企业认证点亮：</div>
            <div class="accountInfo_item_value">
              <div class="value_show">
                <div v-if="this.formData.authStatus == '3' || this.formData.authStatus == '1' || this.formData.authStatus == null" class="value_show_authentication">
                  <svg-icon icon-class="未认证状态" />
                  <div class="value_show_name">未认证</div>
                </div>
                <div v-if="this.formData.authStatus == '2' " class="value_show_authentication">
                  <svg-icon icon-class="已认证状态" />
                  <div class="value_show_name">已认证</div>
                </div>
                <!--                <div v-else class="value_show_name">{{ formData.leftDays }}天</div>-->
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="card2">

        <div class="formItem_header">
          <span class="textTitle">资源用量</span>               <el-button class="textTitle_btn" @click.stop="open('资源升级')">资源升级</el-button>
        </div>
        <div class="accountInfo_div">

          <div class="accountInfo_item accountInfo_item1">
            <div class="accountInfo_item_name">用户数上限:</div>
            <div class="accountInfo_item_value">
              <div class="value_show">
                <div class="value_show_name">已用{{ userTotal }}人(<span v-if="maxUserNumber !='-1'">共{{ maxUserNumber }}人</span> <span v-else>不限</span>)</div>
              </div>
            </div>
          </div>
          <!-- 进度条 -->
          <div class="progressClass">
            <el-progress :percentage="userpercentageNumber" :show-text="false" :text-inside="true" />
            <!-- <el-progress :percentage="90" :show-text="false" :text-inside="true" status="exception" /> -->

          </div>

          <div class="accountInfo_item accountInfo_item1">
            <div class="accountInfo_item_name">存储空间:</div>
            <div class="accountInfo_item_value">
              <div class="value_show">
                <div class="value_show_name">已用 <span v-if="totalFileSize<=1024">{{ totalFileSize.toFixed(2) }} MB</span> <span v-if="totalFileSize>1024">{{ (totalFileSize/1024).toFixed(2) }}GB</span>  (共{{ formData.space }})</div>
              </div>
            </div>
          </div>
          <!-- 进度条 -->
          <div class="progressClass">
            <el-progress v-if="!proportionWarn" :percentage="percentageNumber" :show-text="false" :text-inside="true" />
            <el-progress v-if="proportionWarn" :percentage="Number(percentageNumber)" :show-text="false" :text-inside="true" status="exception" />
          </div>

        </div>
      </el-card>

    </div>
  </div>
</template>
<script>
import { getSecondUserNumber } from '@/api/system/user'
import { selectUserByDeptId, treeselect as getDeptTree } from '@/api/system/dept'
import { mapGetters } from 'vuex'
import upgrade from './upgrade.vue'
export default {
  computed: {
    ...mapGetters([
      'userId', 'userName', 'companyId'
    ])
  },
  props: {
    expirationtime: {},
    formData: {},
    value1: {}
  },
  data() {
    return {
      deptId: undefined, // 部门id用于获取用户list
      editFalg: true,
      isUnit: false,
      codeStatus: true,
      proportionWarn: false,
      totalFileSize: 0, // 已用数量
      percentageNumber: 0, // 进度条占比
      userpercentageNumber: 0, // 进度条占比
      maxUserNumber: 0,
      userTotal: 0,
      accountDialog: false,
      resourcesDialog: false,
      titleText: '账号升级'
    }
  },
  mounted() {
    this.codeStatus = this.$store.state.user.codeStatus

    this.getfileSize()
    this.getSecondUserNumber()
    this.getDeptTree()
    if (this.formData.leftDays < 0) {
      this.formData.leftDays = '永久'
    }
  },
  methods: {
    // 获取用户数量上限
    getSecondUserNumber() {
      getSecondUserNumber().then(res => {
        this.maxUserNumber = res.data
      })
      this.getList()
    },
    // 获取已用用户数量
    getList() {
      selectUserByDeptId({ companyId: this.companyId, deptId: this.deptId }).then(res => {
        this.userTotal = res.total
        if (this.maxUserNumber != -1) {
          this.userpercentageNumber = this.userTotal * 100 / this.maxUserNumber
        } else {
          this.userpercentageNumber = 0
        }
      })
    },
    getDeptTree() {
      getDeptTree().then(res => {
        this.deptId = res.data[0].id
        console.log(this.deptId)
      })
    },
    // 文件大小
    getfileSize() {
      // 使用数量
      const totalFileSize = this.formData.totalFileSize
      this.totalFileSize = Number(totalFileSize.slice(0, -2) / 1024)

      // 总数量
      const totalSpace1 = this.formData.space
      const totalSpace = Number(totalSpace1.slice(0, -2)) * 1024 * 1024

      // 占比计算
      this.percentageNumber = (100 * (Number(this.totalFileSize * 1024) / totalSpace))
      console.log(this.percentageNumber)
      if (this.percentageNumber >= Number(this.value1)) {
        this.proportionWarn = true
      }
    },
    // 升级弹出框
    open(titleText) {
      this.titleText = titleText
      console.log(this.titleText)
      this.$layer.iframe({// 弹框
        content: {
          content: upgrade, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            titleText1: this.titleText
          }// props
        },
        area: ['500px', '200px'],
        title: titleText, // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    }
  }
}
</script>

<style lang="less" scoped>
.versionTag {
  width: 66px !important;
  height: 30px !important;
  border-radius: 6px !important;
  text-align: center;
  /deep/ .el-tag {
    width: 100% !important;
    font-size: 14px !important;
  }
}
.value_show_authentication {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .value_show_name{
    margin-left: 10px;
    font-size: 14px;
  }
  .svg-icon {
    width: 28px;
    height: 28px;
  }
}
.textTitle{
  font-family: Alibaba PuHuiTi 2.0;
  font-size: 18px;
  font-weight: 550;
  line-height: normal;
  letter-spacing: 0em;
  font-feature-settings: "kern" on;
  color: #333333;
}
.textTitle_btn:hover{
  background: rgba(56,123,252,.5) !important;
  cursor: pointer !important;
}
.textTitle_btn {
  width: 80px !important;
  height: 30px !important;
  background: #387BFC !important;
  cursor: pointer !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}
/deep/.el-card{
  overflow:visible;
}
.card1{
  margin-bottom: 10px;
  padding: 0 0 50px 0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.card2{
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.main_main{
  margin: 0;
  padding-top: 0;
  .personalCenter_div{
    width: 100%;height: 150px;
    display: flex;justify-content: center;align-items: center;
    .avatar_div_container{
      width: 66px;
      height: 66px;
      border-radius: 50%;
      margin-right: 40px;
      margin-left: 20px;
      display: flex;justify-content: flex-start;align-items: center;
    }
    .avatar_div{
      height: 100%;
      width: 100%;

      position: relative;
      img{
        width: 66px;height: 66px;
        border-radius: 50%;
      }
      .avatar_button{
        position: absolute;
        top: 0;left: 0;
        width: 66px;height: 66px;
        border-radius: 50%;
        justify-content: center;align-items: center;
        font-size: 22px;
        background-color: #3333334d;
        display: none;
        color: white;
      }
    }
    .avatar_div:hover{
      .avatar_button{
        display: flex;
      }
    }
    .name_div{
      height: 100%;
      display: flex;justify-content: center;
      flex-direction: column;
      .name_div_name{
        font-size: 22px;
        height: 40px;line-height: 40px;
      }
      .name_div_company{
        font-size: 16px;
        color: #666666;
        height: 40px;line-height: 40px;
      }
    }
  }

  .accountInfo_div{
    margin: 0 20px 0;
    font-size: 14px;
    .accountInfo_item{
      display: flex;justify-content: space-between;align-items: center;
      border-bottom: 1px solid rgb(224, 224, 224);
      .accountInfo_item_name{
        width: 150px;
        height: 50px;display: flex;align-items: center;
        margin: 5px 0;
      }
      .accountInfo_item_value{
       display: flex;align-items: center;
        height: 40px;
        .value_show{
          display: flex;align-items: center;justify-content: space-between;
          .value_show_name{
            height: 100%;
            display: flex;align-items: center;
          }
          .value_show_name1{
            color: red;
            height: 100%;
            display: flex;align-items: center;
          }
          .value_show_edit{
            height: 100%;
            display: flex;align-items: center;
            margin-left: 20px;
            font-size: 18px;
          }
        }
        .show_operate{
          width: 100%;justify-content: space-between;
          .value_show_operate{
            color: #387bfc;
          }
        }
        .value_edit{
          width: 100%;
          /deep/ .el-input__inner{
            height: 30px;
          }
        }
      }
    }
  }
}
.accountInfo_item1{
  border: none !important;
}
.progressClass{
  margin-bottom: 10px;
}
</style>
